<template>
  <h1>一个人的信息</h1>
  <h1>姓名: {{ person.name }}</h1>
  <h1>年龄: {{ person.age }}</h1>
  <h1>{{msg}}</h1>
  <h1>{{afanfan}}</h1>
  <button @click="test">测试触发一下Demo组件的Hello事件</button>

  <!-- 哈哈哈 -->
  <slot></slot>

  <!-- 这里如果想显示父组件的东西,就要用到插槽slot -->
  <!-- 嗯嗯嗯 -->
  <!-- <slot name="enen"></slot> --> 

  <!-- 嘿嘿嘿 -->
  <slot name="heihei"></slot>
</template>

<script>
import { reactive } from "vue"; // ref处理基本类型数据  reactive处理引用类型数据
export default {
  name: "demo",
  props: ["msg", "school","afanfan"],
  emits: ["hello"],
  beforeCreate() {
    console.log("---beforeCreate---"); 
  },
  setup(props, context) {
    console.log(context)
    console.log('---setup---') // 在beforeCreate之前执行
    console.log(props) // Proxy {msg: "hahah", school: "尚硅谷", afanfan: "小汤圆"}
    // console.log(context.attrs) // 相当于vue2中的$attrs
    // console.log(context.emit) // 触发自定义事件的
    console.log(context.slots); // 插槽

    // console.log(this) // undefind
    // 数据
    let person = reactive({
      name: "张三",
      age: 18,
    });

    // 方法
    function test() {
      context.emit("hello", 666);
    }
    // 返回一个对象(常用)
    return {
      person: person,
      test: test,
    };
  },
};
</script>
